<template>
    <!--Home Section START-->
    <section id="home" class="home vh-100">
        <!--Home Background START-->
        <div class="home-background position-absolute top-0 start-0 w-100 h-100"><img :src="img" data-aos="fade-up"
                data-aos-duration="1000" alt="home" class="w-100 h-100 fit-cover fit-left-top"></div>
        <!--Home Background END-->
        <!--Home Container START-->
        <div class="container h-100 position-relative">
            <div class="home-details text-center text-sm-end w-100 h-100 d-flex align-items-center">
                <div class="home-details-inner w-100">
                    <!-- <p class="welcome_text fs-4" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500"> -->
                        <vue-typed class="welcome_text fs-4" :strings="typingTexts">
                            <span class="typed_text"></span>
                        </vue-typed>
                        <!-- <span class="typed_text" data-options="{{typingTexts}}"></span> -->
                    <!-- </p> -->
                    <h1 class="fs-1 fw-bold  kayden-underline-center kayden-underline-sm-right kayden-underline-big d-inline-block"
                        data-aos="fade-up" data-aos-duration="800" data-aos-delay="800">I'm Stone Dao</h1>
                </div>
            </div>
        </div>
        <!--Home Container END-->
        <!--Scroll Down START-->
        <div class="scroll-down"> <a href="#about" class="kayden_scrollspy scroll-down-link text-center">
                <div class="scroll-title">Scroll Down</div>
                <div class="scroll-mouse">
                    <div class="whell"></div>
                </div>
            </a> </div>
        <!--Scroll Down END-->
    </section>
    <!--Home Section END-->
</template>
  
<script>
import AOS from "aos"
export default {
    name: 'home',
    data() {
        return {
            img: require('@/assets/images/home.jpg'),
            typingTexts: [
                "Our Major Ecosystem",
                "Metasea",
                "Which is the Aggregation of products such as Games",
                "Social",
                "NFT",
                "and Token trading",
                "is able to help players build better links with games or unions",
                "and have a better experience in the metaverse",
                "as all application scenarios in the metaverse will present obvious gamification features.",
            ],
        }
    },
    mounted() {
        AOS.init();
    },
}
</script>
<style scoped>

</style>